import React from 'react';
import { useSelector } from 'react-redux';
import { Input, Select, Space } from 'antd';
import styles from './styles.module.css';
const { Search } = Input;
const header = () => {
  const { searchList } = useSelector((state) => state.nav);

  let selectValue = searchList[0];
  // 搜索
  const onSearch = (val) => {
    if (val != '') {
      window.open(selectValue.value + val, '_blank');
    }
  };
  // 搜索引擎选择
  const onChange = (val, options) => {
    selectValue = options;
  };
  return (
    <div className={styles.header}>
      <Space.Compact>
        <Select
          size="large"
          defaultValue="百度"
          onChange={onChange}
          options={searchList}
        />
        <Search
          size="large"
          placeholder="请输入要搜索的内容"
          onSearch={onSearch}
          enterButton
          style={{
            width: 400,
          }}
        />
      </Space.Compact>
      <iframe
        className={styles.tianqi}
        allowtransparency="true"
        src="https://i.tianqi.com/?c=code&a=getcode&color=%23FFFFFF&id=35&site=34&icon=1"
      ></iframe>
    </div>
  );
};
export default header;
